<template>
  <div id="main">
    <!-- <div class="tab"> -->
        <van-tabs v-model="activeName" color="#f29600" title-active-color="#f29600">
            <van-tab title="资讯" name="info" ref="info">
            </van-tab>
            <van-tab title="动态" name="trend"></van-tab>
            <van-tab title="作者" name="author"></van-tab>
        </van-tabs>
    <!-- </div> -->
    

    <search-author v-if="activeName === 'author'"></search-author>
    <search-info v-if="activeName === 'info'" :searchValue="searchContent"></search-info>
    <searchTrends v-if="activeName === 'trend'"></searchTrends>
  </div>
  
</template>

<script>
import searchAuthor from './search-author.vue'
import searchInfo from './search-info.vue'
import searchTrends from './search-trends.vue'
export default {
    components:{searchAuthor,searchInfo,searchTrends},
    props: {
        searchValue: {
            type: String,
            default: null
        }
   },
    data(){
        return{
            activeName:'info',
            searchContent:''
        }
    },
    mounted(){

    },
    created(){
        console.log(this.searchValue)
        this.searchContent = this.searchValue
    },
    methods:{

    }
}
</script>

<style lang="less" scoped>
#main{
    .van-tabs{
       
        padding: 10px;
    }
    /deep/.van-tab {
        border-bottom: 1px solid #f5f7fa;
    }
    /deep/.van-tab__text--ellipsis {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 20px;
    }
   
}
</style>